<script setup>
	import { ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'
	import { parseTime } from '@/utils/index.js'

	// 获取战令用户信息
	const userInfo = ref({
		war_status: 1,
	})
	const uppercent = ref(0)
	const daysShort = ref(0)
	const maxGrade = ref()
	const userGrade = ref(0)
	async function getWarUser() {
		const res = await http.request({
			url: '/api/war/warUser',
			method: 'POST',
			data: {},
		})
		userInfo.value = res.data
		console.log(res)
		maxGrade.value = res.max_grade
		uppercent.value =
			(Number(res.data.war_experience) /
				Number(res.data.sum_experience_jdt)) *
			100
		if (uppercent.value >= 100) {
			uppercent.value = 100
		}
		const currentTimestamp = Math.floor(Date.now() / 1000)
		daysShort.value = res.data.war_end - currentTimestamp
		userGrade.value = res.data.war_grade
	}

	//等级列表
	const currentPage = ref(1)
	const pageSize = ref(10)
	const total = ref(0)
	const rewardList = ref([])
	async function getLevelList() {
		const res = await http.request({
			url: '/api/war/getGradeList',
			method: 'POST',
			data: {
				page: currentPage.value,
				limit: pageSize.value,
			},
		})
		console.log(res)
		total.value = res.count

		if (res.data.length == 0) {
			--currentPage.value
		}
		rewardList.value = [...rewardList.value, ...res.data]
		if (rewardList.value[total.value - 1]) {
			rewardList.value.pop()
		}
	}

	function listLower() {
		++currentPage.value
		getLevelList()
	}
	// 返回上一页
	function goBack() {
		uni.navigateBack({ delta: 1 })
	}

	const takepopup = ref()
	// 当前选择领取
	const currentTake = ref([])
	const currentId = ref(0)
	function takeReward(info, id) {
		if (info.length) {
			currentTake.value = [...info]
			currentTake.value.shift()
		} else {
			currentTake.value = [info]
		}
		currentId.value = id
		takepopup.value.open('center')
	}

	async function takeAll() {
		console.log(currentTake.value)
		const res = await http.request({
			url: '/api/war/lqPost',
			method: 'POST',
			data: {
				id: currentId.value,
				type: currentTake.value[0].type,
			},
		})
		console.log(res)
		if (res.st == 1) {
			uni.utils.toast('领取成功')
			currentTake.value.forEach((item) => {
				item.is_lq = 1
			})
			takepopup.value.close()
		} else {
			// uni.utils.toast(res.msg)
			console.log(res.msg)
		}
	}

	async function takeAllSum() {
		let arr = []
		rewardList.value.forEach((item) => {
			if (userInfo.value.war_type == 1) {
				if (item.win_info[0].is_lq == 2) {
					arr.push({
						grade_id: item.id,
						type: 1,
					})
				}
			} else {
				if (item.win_info[0].is_lq == 2) {
					arr.push({
						grade_id: item.id,
						type: 1,
					})
				}
				if (item.win_info[1].is_lq == 2) {
					arr.push({
						grade_id: item.id,
						type: 2,
					})
				}
			}
		})
		if (maxGrade.value.win_info[0].is_lq == 2) {
			arr.push({
				grade_id: maxGrade.value.id,
				type: 1,
			})
		}
		if (maxGrade.value.win_info[2].is_lq == 2) {
			arr.push({
				grade_id: maxGrade.value.id,
				type: 2,
			})
		}
		console.log(arr)
		const res = await http.request({
			url: '/api/war/allLq',
			method: 'POST',
			data: {
				idArr: arr,
			},
		})
		console.log(res)
		if (res.st == 1) {
			uni.utils.toast('领取成功')
			rewardList.value = []
			getWarUser()
			getLevelList()
		} else {
			uni.utils.toast('领取失败')
		}
	}
	// 获取设备信息
	const shebei = ref(process.env.VUE_APP_PLATFORM)

	onShow(() => {
		getWarUser()
		getLevelList()
	})
</script>

<template>
	<view class="war-content">
		<view class="content-top">
			<video
				v-if="shebei == 'mp-weixin'"
				style="
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				"
				id="myVideo"
				src="https://ojqn.wm2177.com/wechat_imgs/war/background.mp4"
				autoplay="true"
				:controls="false"
				:enable-progress-gesture="false"
				:enable-play-gesture="false"
				:vslide-gesture="false"
				:vslide-gesture-in-fullscreen="false"
				:loop="true"
				:show-progress="false"
				:webkit-playsinline="true"
				:x-webkit-airplay="true"
			></video>

			<view class="war-top">
				<view class="war-back" @click="goBack">
					<view class="back-aim"> </view>
				</view>
			</view>
			<view class="war-above">
				<view class="above-top">
					<view class="name">
						<view class="batch" v-if="userInfo.war_status == 1">
							第{{ userInfo.batch }}期
						</view>
					</view>
					<view class="above-time" v-if="userInfo.war_status == 1">
						<view class=""> 剩余时间： </view>

						<uni-countdown
							color="#FFFFFF"
							:show-second="false"
							:day="Math.floor(daysShort / (24 * 60 * 60))"
							:hour="
								Math.floor(
									(daysShort % (60 * 60 * 24)) / (60 * 60)
								)
							"
							:minute="Math.floor((daysShort % (60 * 60)) / 60)"
							:show-colon="false"
						/>
						<!-- {{
							`${Math.floor(
								daysShort / (24 * 60 * 60)
							)}天${Math.floor(
								(daysShort % (60 * 60 * 24)) / (60 * 60)
							)}小时${Math.floor(
								(daysShort % (60 * 60)) / 60
							)}分钟`
						}} -->
					</view>
					<view class="rule"> 规则 </view>
				</view>
				<view class="above-bottom" v-if="userInfo.war_status == 1">
					<view class="above-bottom-bottom"> </view>
					<view class="level-num">
						<view
							class=""
							style="
								margin-top: 10rpx;
								font-size: 62rpx;
								line-height: 62rpx;
							"
						>
							{{ userInfo.war_grade }}
						</view>
						<view
							class=""
							style="font-size: 24rpx; line-height: 24rpx"
						>
							LEVEL
						</view>
					</view>
					<view class="level-bar">
						<view class="" style="font-size: 28rpx; color: #da5ffe">
							升级需消费卡尘：{{
								`${
									userInfo.war_experience >
									userInfo.sum_experience_jdt
										? userInfo.sum_experience_jdt
										: userInfo.war_experience
								}/${userInfo.sum_experience_jdt}`
							}}
						</view>
						<view class="" style="margin-top: 13rpx">
							<view class="bottom-bar">
								<view
									class="top-bar"
									:style="{ width: uppercent + '%' }"
								>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="war-down" v-if="userInfo.war_status == 1">
			<view class="war-down-top">
				<view class="category">
					<view class=""> 支援物资 </view>
					<view class="" style="font-size: 16rpx">
						SUPPORT MATERIALS
					</view>
				</view>
				<view
					class=""
					style="
						margin-left: 20rpx;
						margin-right: 20rpx;
						font-size: 26rpx;
					"
				>
					抽赏金额累计{{ userInfo.special_money }}可免费解锁特殊奖励
				</view>
				<view class="take-all" @click="takeAllSum"> </view>
			</view>
			<view class="leve-reward">
				<view class="level-normal">
					<view class="" style="width: 50%"> 等级 </view>
					<view class="" style="width: 50%"> 普通奖励 </view>
				</view>
				<view class="special">
					<view class="special-lock" v-if="userInfo.war_type == 1">
					</view>
					<view class=""> 特殊奖励 </view>
				</view>
			</view>
			<scroll-view
				scroll-y="true"
				class="scroll-Y"
				style="height: 48vh"
				@scrolltolower="listLower"
			>
				<view
					class="level-reward-item"
					v-for="(item, index) in rewardList"
					:key="'relist' + item.id"
				>
					<view class="level-reward-normal">
						<view class="level-reward-normal-level">
							<view class="level-reward-normal-level-left">
								<view
									class="level-css"
									:style="[
										{
											backgroundImage: `url(
												${
													item.grade <= userGrade
														? 'https://ojqn.wm2177.com/wechat_imgs/war/square.png'
														: 'https://ojqn.wm2177.com/wechat_imgs/war/dark-square.png'
												}
											)`,
										},
									]"
								>
									{{ item.grade }}
									<view
										class="bar-top"
										v-if="index != 0"
										:style="[
											{
												backgroundColor:
													item.grade <= userGrade
														? '#DA5FFE'
														: '#5A4F95',
											},
										]"
									></view>
									<view
										class="bar-bottom"
										:style="[
											{
												backgroundColor:
													item.grade <= userGrade
														? '#DA5FFE'
														: '#5A4F95',
											},
										]"
									></view>
								</view>
							</view>
							<view class="level-reward-normal-level-right">
								<view class="normal-reward-img">
									<view
										class="cant"
										v-if="item.win_info[0].is_lq == 0"
									>
									</view>
									<view
										class=""
										v-if="item.win_info[0].is_lq == 2"
										@click="
											takeReward(
												item.win_info[0],
												item.id
											)
										"
									>
										<view class="can-out"></view>
										<view class="can-in"></view>
									</view>
									<view
										class="allready-take"
										v-if="item.win_info[0].is_lq == 1"
									>
									</view>
									<image
										v-if="item.win_info[0].win_type == 1"
										style="
											width: 100%;
											height: 100%;
											background-color: #522fa9;
										"
										src="../../static/point.png"
										mode=""
									></image>
									<image
										v-if="item.win_info[0].win_type == 2"
										style="
											width: 100%;
											height: 100%;
											background-color: #522fa9;
										"
										src="../../static/coupon.png"
										mode=""
									></image>
									<image
										v-if="item.win_info[0].win_type == 3"
										style="
											width: 100%;
											height: 100%;
											background-color: #522fa9;
										"
										:src="item.win_info[0].goods_info.img"
										mode=""
									></image>
									<image
										v-if="item.win_info[0].win_type == 4"
										style="
											width: 100%;
											height: 100%;
											background-color: #522fa9;
										"
										src="../../static/diamond.png"
										mode=""
									></image>
									<view
										class="normal-reward-num"
										v-if="
											item.win_info[0].win_type == 1 ||
											item.win_info[0].win_type == 4
										"
									>
										{{ item.win_info[0].data }}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="level-reward-special">
						<scroll-view
							class="scroll-view_H"
							scroll-x="true"
							style="width: 240rpx; height: 106rpx"
						>
							<view
								class=""
								style="height: 106rpx; display: flex"
							>
								<view
									class="normal-reward-img-item"
									v-for="(reward, index) in item.win_info"
									:key="'special' + index"
									v-show="reward.id != item.win_info[0].id"
								>
									<view
										class="normal-lock"
										style="z-index: 2"
										v-if="userInfo.war_type == 1"
									></view>

									<view
										class="cant"
										style="
											width: 100%;
											height: 100%;
											position: absolute;
											top: 0;
											left: 0;
											z-index: 1;
										"
										v-if="reward.is_lq == 0"
									></view>
									<view
										class=""
										v-if="reward.is_lq == 2"
										@click="
											takeReward(item.win_info, item.id)
										"
									>
										<view class="can-out"></view>
										<view class="can-in"></view>
									</view>
									<view
										class="allready-take"
										v-if="reward.is_lq == 1"
									>
									</view>
									<image
										v-if="reward.win_type == 1"
										style="
											width: 100%;
											height: 100%;
											background-color: #522fa9;
										"
										src="../../static/point.png"
										mode=""
									></image>
									<image
										v-if="reward.win_type == 2"
										style="
											width: 100%;
											height: 100%;
											background-color: #522fa9;
										"
										src="../../static/coupon.png"
										mode=""
									></image>
									<image
										v-if="reward.win_type == 3"
										style="
											width: 100%;
											height: 100%;
											background-color: #522fa9;
										"
										:src="reward.goods_info.img"
										mode=""
									></image>
									<image
										v-if="reward.win_type == 4"
										style="
											width: 100%;
											height: 100%;
											background-color: #522fa9;
										"
										src="../../static/diamond.png"
										mode=""
									></image>
									<view
										class="normal-reward-num"
										v-if="
											reward.win_type == 1 ||
											reward.win_type == 4
										"
									>
										{{ reward.data }}
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 没有战令 -->
		<view
			class=""
			style="height: 61vh; overflow: hidden; position: relative"
			v-else
		>
			<view
				class=""
				style="
					height: 158rpx;
					background-color: #240e3c;
					border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);
				"
			>
			</view>
			<view
				class=""
				style="
					height: 158rpx;
					background-color: #240e3c;
					border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);
				"
			>
			</view>
			<view
				class=""
				style="
					height: 158rpx;
					background-color: #240e3c;
					border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);
				"
			>
			</view>
			<view
				class=""
				style="
					height: 158rpx;
					background-color: #240e3c;
					border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);
				"
			>
			</view>
			<view
				class=""
				style="
					height: 158rpx;
					background-color: #240e3c;
					border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);
				"
			>
			</view>
			<view
				class=""
				style="
					height: 158rpx;
					background-color: #240e3c;
					border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);
				"
			>
			</view>
			<view
				class=""
				style="
					height: 158rpx;
					background-color: #240e3c;
					border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);
				"
			>
			</view>
			<view
				class=""
				style="
					height: 100%;
					width: 100%;
					position: absolute;
					top: 0;
					left: 0;
					background-color: transparent;
					text-align: center;
					line-height: 49vh;
				"
			>
				本期暂无战令，敬请期待
			</view>
		</view>
		<view class="bottom-level" v-if="userInfo.war_status == 1">
			<view class="level-reward-item">
				<view class="level-reward-normal">
					<view class="level-reward-normal-level">
						<view class="level-reward-normal-level-left">
							<view
								class="level-css"
								:style="[
									{
										backgroundImage: `url(
												${(maxGrade.win_info[0].grade = userGrade
													? 'https://ojqn.wm2177.com/wechat_imgs/war/square.png'
													: 'https://ojqn.wm2177.com/wechat_imgs/war/dark-square.png')}
											)`,
									},
								]"
								>{{ maxGrade.grade }}</view
							>
						</view>
						<view class="level-reward-normal-level-right">
							<view class="normal-reward-img">
								<view
									class="cant"
									v-if="maxGrade.win_info[0].is_lq == 0"
								></view>
								<view
									class=""
									v-if="maxGrade.win_info[0].is_lq == 2"
									@click="
										takeReward(
											maxGrade.win_info[0],
											maxGrade.id
										)
									"
								>
									<view class="can-out"></view>
									<view class="can-in"></view>
								</view>
								<view
									class="allready-take"
									v-if="maxGrade.win_info[0].is_lq == 1"
								>
								</view>
								<image
									v-if="maxGrade.win_info[0].win_type == 1"
									style="
										width: 100%;
										height: 100%;
										background-color: #522fa9;
									"
									src="../../static/point.png"
									mode=""
								></image>
								<image
									v-if="maxGrade.win_info[0].win_type == 2"
									style="
										width: 100%;
										height: 100%;
										background-color: #522fa9;
									"
									src="../../static/coupon.png"
									mode=""
								></image>
								<image
									v-if="maxGrade.win_info[0].win_type == 3"
									style="
										width: 100%;
										height: 100%;
										background-color: #522fa9;
									"
									:src="maxGrade.win_info[0].goods_info.img"
									mode=""
								></image>
								<image
									v-if="maxGrade.win_info[0].win_type == 4"
									style="
										width: 100%;
										height: 100%;
										background-color: #522fa9;
									"
									src="../../static/diamond.png"
									mode=""
								></image>
								<view
									class="normal-reward-num"
									v-if="
										maxGrade.win_info[0].win_type == 1 ||
										maxGrade.win_info[0].win_type == 4
									"
								>
									{{ maxGrade.win_info[0].data }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="level-reward-special">
					<scroll-view
						class="scroll-view_H"
						scroll-x="true"
						style="width: 240rpx; height: 106rpx"
					>
						<view class="" style="height: 106rpx; display: flex">
							<view
								class="normal-reward-img-item"
								v-for="(item, index) in maxGrade.win_info"
								:key="'bottom' + index"
								v-show="item.id != maxGrade.win_info[0].id"
							>
								<view
									class="normal-lock"
									style="z-index: 2"
									v-if="userInfo.war_type == 1"
								></view>
								<view
									class="cant"
									style="
										width: 100%;
										height: 100%;
										position: absolute;
										top: 0;
										left: 0;
										z-index: 1;
									"
									v-if="item.is_lq == 0"
								></view>
								<view
									class=""
									v-if="item.is_lq == 2"
									@click="
										takeReward(
											maxGrade.win_info,
											maxGrade.id
										)
									"
								>
									<view class="can-out"></view>
									<view class="can-in"></view>
								</view>
								<view
									class="allready-take"
									v-if="item.is_lq == 1"
								>
								</view>
								<image
									v-if="item.win_type == 1"
									style="
										width: 100%;
										height: 100%;
										background-color: #522fa9;
									"
									src="../../static/point.png"
									mode=""
								></image>
								<image
									v-if="item.win_type == 2"
									style="
										width: 100%;
										height: 100%;
										background-color: #522fa9;
									"
									src="../../static/coupon.png"
									mode=""
								></image>
								<image
									v-if="item.win_type == 3"
									style="
										width: 100%;
										height: 100%;
										background-color: #522fa9;
									"
									:src="item.goods_info.img"
									mode=""
								></image>
								<image
									v-if="item.win_type == 4"
									style="
										width: 100%;
										height: 100%;
										background-color: #522fa9;
									"
									src="../../static/diamond.png"
									mode=""
								></image>
								<view
									class="normal-reward-num"
									v-if="
										item.win_type == 1 || item.win_type == 4
									"
								>
									{{ item.data }}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- 领取弹出层 -->
		<uni-popup ref="takepopup" type="center">
			<view class="takepopup-content">
				<scroll-view
					scroll-y="true"
					style="height: 400rpx; width: 392rpx; margin-bottom: 50rpx"
				>
					<view
						class="center-reward"
						v-for="item in currentTake"
						:key="'take' + item.id"
					>
						<view class="center-reward-top"> </view>
						<image
							v-if="item.win_type == 1"
							style="width: 100%; height: 100%"
							src="../../static/point.png"
							mode=""
						></image>
						<image
							v-if="item.win_type == 2"
							style="width: 100%; height: 100%"
							src="../../static/coupon.png"
							mode=""
						></image>
						<image
							v-if="item.win_type == 3"
							style="
								width: 60%;
								height: 60%;
								background-color: #522fa9;
							"
							:src="item.goods_info.img"
							mode=""
						></image>
						<image
							v-if="item.win_type == 4"
							style="width: 100%; height: 100%"
							src="../../static/diamond.png"
							mode=""
						></image>
						<view
							class=""
							style="
								position: absolute;
								bottom: 38rpx;
								right: 33rpx;
								font-size: 49rpx;
							"
							v-if="item.win_type == 4 || item.win_type == 1"
						>
							{{ item.data }}
						</view>
					</view>
				</scroll-view>
				<view class="take-sure" @click="takeAll"> </view>
			</view>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
	.war-content {
		position: relative;
		height: 100vh;
		// background-color: #522fa9;
		color: #fff;

		.content-top {
			position: relative;
			height: 632rpx;
			padding: 88rpx 18rpx 0 18rpx;

			box-sizing: border-box;
			background: url('https://ojqn.wm2177.com/wechat_imgs/war/background.jpg')
				no-repeat;
			background-size: contain;

			.war-top {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.war-back {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 57rpx;
					height: 57rpx;
					background-color: rgba(7, 1, 53, 0.5);
					border-radius: 50%;

					.back-aim {
						width: 20rpx;
						height: 20rpx;
						border-top: 4rpx solid #fff;
						border-left: 4rpx solid #fff;
						transform: rotate(-45deg);
					}
				}
			}
		}

		.war-above {
			.above-top {
				position: relative;

				.name {
					position: relative;
					width: 308rpx;
					height: 62rpx;
					margin-top: 58rpx;
					margin-bottom: 24rpx;
					box-sizing: border-box;
					background: url('https://ojqn.wm2177.com/wechat_imgs/war/title.png')
						no-repeat;
					background-size: contain;
					.batch {
						position: absolute;
						top: -30rpx;
						right: -32rpx;
						height: 32rpx;
						padding: 0 15rpx;
						box-sizing: border-box;
						background: linear-gradient(0deg, #d538ec, #e06df0);
						border-radius: 16rpx;
						font-size: 21rpx;
						text-align: center;
						line-height: 32rpx;
					}
				}

				.above-time {
					display: flex;
					align-items: center;
					font-size: 22rpx;
				}

				.rule {
					width: 57rpx;
					height: 57rpx;
					border-radius: 50%;
					background-color: rgba(7, 1, 53, 0.5);
					position: absolute;
					top: 0;
					right: 0;
					font-size: 22rpx;
					line-height: 57rpx;
					text-align: center;
				}
			}

			.above-bottom {
				position: relative;
				margin-top: 67rpx;
				display: flex;
				align-items: center;

				.above-bottom-bottom {
					position: absolute;
					top: 14rpx;
					left: -18rpx;
					width: 602rpx;
					height: 88rpx;
					background-color: rgba(9, 19, 44, 0.3);
				}

				.level-num {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 144rpx;
					height: 144rpx;
					background: url('https://ojqn.wm2177.com/wechat_imgs/war/square.png')
						no-repeat;
					background-size: contain;
					z-index: 2;
				}

				.level-bar {
					width: 780rpx;
					height: 88rpx;
					margin-bottom: 18rpx;

					.bottom-bar {
						position: relative;
						width: 346rpx;
						height: 17rpx;
						background-color: #190118;

						.top-bar {
							position: absolute;
							top: 0;
							left: 0;
							height: 100%;
							background: linear-gradient(
								-90deg,
								#da5ffe,
								#efb8de
							);
						}
					}

					z-index: 2;
				}
			}
		}

		.war-down {
			position: relative;
			top: -90rpx;
			height: 66vh;
			width: 100%;
			background-color: rgba(7, 1, 53, 0.5);

			.war-down-top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.category {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 258rpx;
					height: 90rpx;
					background-color: #6f16d3;
					font-size: 36rpx;
				}
				.take-all {
					width: 197rpx;
					height: 56rpx;
					margin-right: 20rpx;
					background: url('https://ojqn.wm2177.com/wechat_imgs/war/take-all.png')
						no-repeat;
					background-size: contain;
				}
			}

			.leve-reward {
				display: flex;
				height: 55rpx;
				font-size: 24rpx;
				text-align: center;
				line-height: 55rpx;

				.level-normal {
					display: flex;
					width: 50%;
					background-color: #453886;
				}

				.special {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50%;
					background: linear-gradient(0deg, #d538ec, #e06df0);
					.special-lock {
						width: 25rpx;
						height: 33rpx;
						margin-right: 10rpx;
						background: url('https://ojqn.wm2177.com/wechat_imgs/war/lock.png')
							no-repeat;
						background-size: contain;
					}
				}
			}

			.level-reward-item {
				display: flex;
				height: 158rpx;
				// box-sizing: border-box;
				border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);

				.level-reward-normal {
					width: 50%;
					height: 158rpx;
					box-sizing: border-box;
					background-color: #2a2254;
				}

				.level-reward-normal-level {
					display: flex;
					height: 100%;

					.level-reward-normal-level-left {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 50%;
						height: 100%;
						overflow: hidden;

						.level-css {
							position: relative;
							width: 76rpx;
							height: 76rpx;
							background: url('https://ojqn.wm2177.com/wechat_imgs/war/square.png')
								no-repeat;
							background-size: contain;
							font-size: 38rpx;
							text-align: center;
							line-height: 70rpx;
							font-style: initial;

							.bar-top {
								position: absolute;
								left: 50%;
								top: -55%;
								width: 8rpx;
								height: 70%;
								background-color: #5a4f95;
								transform: translateX(-50%);
							}

							.bar-bottom {
								position: absolute;
								left: 50%;
								top: 86%;
								width: 8rpx;
								height: 70%;
								background-color: #5a4f95;
								transform: translateX(-50%);
							}
						}
					}

					.level-reward-normal-level-right {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 50%;
						height: 100%;

						.normal-reward-img {
							position: relative;
							width: 106rpx;
							height: 106rpx;
							.cant {
								position: absolute;
								top: 0;
								bottom: 0;
								z-index: 2;
								width: 100%;
								height: 100%;
							}
							.normal-reward-num {
								position: absolute;
								bottom: 0;
								left: 0;
								width: 100%;
								height: 24rpx;
								background-color: #b2a5f5;
								color: black;
								line-height: 24rpx;
								text-align: center;
								font-weight: 700;
								font-style: italic;
								font-size: 20rpx;
							}
						}
					}
				}

				.level-reward-special {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50%;
					height: 158rpx;
					background-color: #421f94;

					.normal-reward-img-item {
						position: relative;
						width: 106rpx;
						height: 106rpx;
						flex-shrink: 0;
						// background-color: pink;
						margin-right: 28rpx;

						&:last-child {
							margin-right: 0;
						}

						.normal-lock {
							position: absolute;
							top: 0;
							right: 0;
							width: 25rpx;
							height: 33rpx;
							background: url('https://ojqn.wm2177.com/wechat_imgs/war/lock.png')
								no-repeat;
							background-size: contain;
						}

						.normal-reward-num {
							position: absolute;
							bottom: 0;
							left: 0;
							width: 100%;
							height: 24rpx;
							background-color: #b2a5f5;
							color: black;
							line-height: 24rpx;
							text-align: center;
							font-weight: 700;
							font-style: italic;
							font-size: 20rpx;
						}
					}
				}
			}
		}

		.bottom-level {
			position: absolute;
			bottom: 0;
			left: 0;
			height: 170rpx;
			width: 100%;

			.level-reward-item {
				display: flex;
				height: 170rpx;
				box-sizing: border-box;

				.level-reward-normal {
					width: 50%;
					height: 158rpx;
					box-sizing: border-box;
					background-color: #453886;
				}

				.level-reward-normal-level {
					display: flex;
					height: 100%;

					.level-reward-normal-level-left {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 50%;
						height: 100%;
						overflow: hidden;

						.level-css {
							position: relative;
							width: 76rpx;
							height: 76rpx;
							background: url('https://ojqn.wm2177.com/wechat_imgs/war/square.png')
								no-repeat;
							background-size: contain;
							font-size: 38rpx;
							text-align: center;
							line-height: 70rpx;
							font-style: initial;
						}
					}

					.level-reward-normal-level-right {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 50%;
						height: 100%;

						.normal-reward-img {
							position: relative;
							width: 106rpx;
							height: 106rpx;
							// background-color: pink;

							.cant {
								position: absolute;
								top: 0;
								bottom: 0;
								z-index: 2;
								width: 100%;
								height: 100%;
							}

							.normal-reward-num {
								position: absolute;
								bottom: 0;
								left: 0;
								width: 100%;
								height: 24rpx;
								background-color: #b2a5f5;
								color: black;
								line-height: 24rpx;
								text-align: center;
								font-weight: 700;
								font-style: italic;
								font-size: 20rpx;
							}
						}
					}
				}

				.level-reward-special {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50%;
					height: 158rpx;
					background-color: #db55ee;

					.normal-reward-img-item {
						position: relative;
						width: 106rpx;
						height: 106rpx;
						flex-shrink: 0;
						// background-color: pink;
						margin-right: 28rpx;

						&:last-child {
							margin-right: 0;
						}
						.normal-lock {
							position: absolute;
							top: 0;
							right: 0;
							width: 25rpx;
							height: 33rpx;
							background: url('https://ojqn.wm2177.com/wechat_imgs/war/lock.png')
								no-repeat;
							background-size: contain;
						}
						.normal-reward-num {
							position: absolute;
							bottom: 0;
							left: 0;
							width: 100%;
							height: 24rpx;
							background-color: #b2a5f5;
							color: black;
							line-height: 24rpx;
							text-align: center;
							font-weight: 700;
							font-style: italic;
							font-size: 20rpx;
						}
					}
				}
			}
		}

		.can-out {
			position: absolute;
			top: 0;
			bottom: 0;
			z-index: 2;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			box-shadow: 0rpx 0rpx 28rpx 0rpx #da5ffe;
		}
		.can-in {
			position: absolute;
			top: 0;
			bottom: 0;
			z-index: 2;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			box-shadow: inset 0rpx 0rpx 28rpx 0rpx #da5ffe;
			border: 4rpx solid #da5ffe;
			border-radius: 4rpx;
		}

		.allready-take {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			width: 100%;
			height: 100%;
			background: url('https://ojqn.wm2177.com/wechat_imgs/war/check.png')
				no-repeat;
			background-size: contain;
		}
		.takepopup-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 750rpx;
			height: 784rpx;
			background: url('https://ojqn.wm2177.com/wechat_imgs/war/take-bg.png')
				no-repeat;
			background-size: contain;
			.center-reward {
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				width: 392rpx;
				height: 400rpx;
				margin-bottom: 50rpx;
				box-sizing: border-box;
				background: url('https://ojqn.wm2177.com/wechat_imgs/war/pop-center.png')
					no-repeat;
				background-size: contain;
				.center-reward-top {
					position: absolute;
					top: 0;
					bottom: 0;
					width: 100%;
					height: 100%;
					background: url('https://ojqn.wm2177.com/wechat_imgs/war/pop-center.png')
						no-repeat;
					background-size: contain;
				}
			}
			.take-sure {
				width: 244rpx;
				height: 83rpx;
				background: url('https://ojqn.wm2177.com/wechat_imgs/war/sure.png')
					no-repeat;
				background-size: contain;
			}
		}
	}
	::v-deep .uni-countdown__number {
		width: 30rpx !important;
		height: 28rpx !important;
		margin: 0 !important;
		line-height: 28rpx !important;
		font-size: 22rpx;
	}
	::v-deep .uni-countdown__splitor {
		line-height: 28rpx !important;
		// padding: 0 4rpx !important;
		font-size: 22rpx;
		color: #fff !important;
	}
</style>
